<!doctype html>
<html lang="en" ng-app="aaa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
</head>
<body ng-controller="ccc">

<h1>用户列表</h1>
<table border="1">
    <tr>
        <th>用户名</th>
        <th>密码</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="user in users">
        <td>{{user.username}}</td>
        <td>{{user.password}}</td>
        <td>{{user.address}}</td>
        <td>
            <button ng-click="edit(user)">编辑</button>
            <button ng-click="delete(user)">删除</button>
        </td>
    </tr>
</table>

<h1>编辑用户</h1>
<table border="1">
    <tr>
        <th>用户名</th>
        <td>
            <input type="text" ng-model="user.username">
        </td>
    </tr>
    <tr>
        <th>密码</th>
        <td>
            <input type="text" ng-model="user.password">
        </td>
    </tr>
    <tr>
        <th>地址</th>
        <td>
            <input type="text" ng-model="user.address">
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <button ng-click="submit()">提交</button>
        </td>
    </tr>
</table>

<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<script>
    angular.module('aaa', []).controller('ccc', ($scope, $http) => {
        $scope.users = []
        $scope.user = {}
        let url = 'http://localhost:8080'
        $scope.onInit = () => {
            $scope.load()
        }
        $scope.load = () => {
            $http.get(`${url}/user`).then(r => {
                $scope.users = r.data
            })
        }
        $scope.onInit()
        $scope.submit = () => {
            $http.post(`${url}/user`, $scope.user).then(r => {
                $scope.user = {}
                $scope.load()
            })
        }
        $scope.edit = (v) => {
            $scope.user = angular.copy(v)
        }
        $scope.delete = (v) => {
            let id = v.id.id.String;
            $http.delete(`${url}/user/${id}`).then(r => {
                $scope.load()
            })
        }
    })
</script>
</body>
</html>